<template>
  <div class="login">
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      欢迎登录
    </van-divider>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' },
          {pattern: /^1[356789]\d{9}$/,message:'手机号格式错误'}]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" >登录</van-button>
      </div>
    </van-form>
    <div style="margin: 16px;">
      <van-button round block type="info" @click.native="register()">去注册</van-button><br>
      <van-button round block type="info" @click="code()">使用验证码登录</van-button>
    </div>
        

    <!-- <mt-field label="手机号" placeholder="请输入手机号" v-model="phone"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-button type="primary" size="large" @click.native="login()">登录</mt-button>
    <mt-button type="primary" size="large" @click.native="register()">去注册</mt-button> -->
  </div>
</template>

<script>
import url from '../tools/url'
import { Toast } from 'mint-ui';
export default {
  name: 'Login',
  data () {
    return {
      phone:"",
      password:""
    }
  },
  mounted() {
    // 新闻
       this.axios.get("/api1/toutiao/index?key=c63a6970b25123a125819d98f5c9a987").then(res=>{
      console.log(res)
    })
    // 天气
     this.axios.get("/api2/simpleWeather/query?key=b2bdddf0cc016a2edec03583f4329992").then(res=>{
      console.log(res)
    })

  },
  methods: {
      onSubmit(){
        // console.log(123);
        var str = `phone=${this.phone}&password=${this.password}`;
          this.axios.post("/api3"+url.PASSWORD,str).then(res=>{
              console.log(res);
              if(res.data.code == 200){
                  // 把token存到浏览器
                  sessionStorage.setItem("token",res.data.data.token);
                  //把用户信息存到vuex中
                  this.$store.commit("save",res.data.data);
                  this.$router.push("/");
              }else{
                  Toast(res.data.message);
              }
          })
      },
      code(){
        this.$router.push("/code")
      },
      // login(){
      //     var str = `phone=${this.phone}&password=${this.password}`;
      //     this.axios.post("https://bufferc.store:8443/user/loginByPassword",str).then(res=>{
      //         console.log(res);
      //         if(res.data.code == 200){
      //             // 把token存到浏览器
      //             sessionStorage.setItem("token",res.data.data.token);
      //             //把用户信息存到vuex中
      //             this.$store.commit("save",res.data.data);
      //             this.$router.push("/");
      //         }else{
      //             Toast(res.data.message);
      //         }
      //     })
      // },
      register(){
          this.$router.push("/register")
      }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mine{
  margin-top: 45px;
  margin-bottom: 62px ;
}
</style>
